import { FC, useMemo } from "react";
import styled from "./progress.module.scss";

type Props = {
  current: number;
  total: number;
};

const Progress: FC<Props> = ({ current, total }) => {
  const width = useMemo(() => {
    const result = (current / total) * 100;
    return result > 100 ? 100 : result;
  }, [current, total]);

  return (
    <div className={styled.progress}>
      <div className={styled.bar} style={{ width: width + "%" }}>
        {current}/{total}
      </div>
    </div>
  );
};

export default Progress;
